<template>
  <div style=" height: 100vh;  background-color: #f7f7f6">
    <div class="box">
      <!-- 顶部 -->
   
      <div class="topbox align">
        <i @click="back" class="iconfont icon-zuojiantou"></i>
        <span>{{ introduction.name }}</span>
      </div>

      <!-- 封面和简介 -->
      <div class="flex fmbox">
        <div class="logo">
          <van-image
            width="80"
            height="110"
            :src="introduction.picUrl"
          />
        </div>
        <div class="brief font2">
          <!-- 小说名称 -->
          <div>{{ introduction.name }}</div>
          <!-- 作者 -->
          <span
            >{{ introduction.author }} <i class="iconfont icon-mianfei1"></i
          ></span>

         
</div>
<div class="flexcenter">
        
    
        <svg t="1677933965686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1476" 
      width="20" height="20"><path d="M928 832l-64 32-352 160-352-160-64-32a96 96 0 0 1-96-96V96a96 96 0 0 1 96-96l64 32 352 160 352-160 64-32a96 96 0 0 1 96 96v640a96 96 0 0 1-96 96z m-480 0V288L128 192v544l320 128v-32zM896 192L576 288v576l320-128V192z" fill="#b550ff" p-id="1477"></path></svg>
      <span  >16+</span>
      </div>
      </div>
     
      <div class="flex sp">
        
          <div>
            <p>   {{introduction.browse > 1000 ? introduction.browse/1000+"k" : introduction.browse }}
            </p>
            <p > FllOWERS</p>
          </div>
          <div>
            <p>   {{introduction.evaluateNum > 1000 ? introduction.evaluateNum/1000+"k" : introduction.evaluateNum ? introduction.evaluateNum:13+"k" }}</p>
            <p> evaluate</p>
          </div>
          <div>
            <p> {{introduction.partSum}}</p>
            <p> List</p>
          </div>
          

      </div>


      <p style=" color: #cbd0d2; font-size: 0.4rem ; margin-left: 0.5rem;margin-top: 0.5rem; ">briefIntroduction</p>
      <!-- <van-divider >briefIntroduction</van-divider> -->
      <p  class="introduce font2"  :class="{moreadd : more}">
        <!-- 简介 -->
        {{ introduction.brief }}
      </p>
      <van-divider @click="moreadd" content-position="right"
        >more<i class="icon-xiala iconfont"></i
      ></van-divider>
    </div>
    <div class="reader">
      <!-- 小说内容 -->
      <van-skeleton v-if="!novel" title :row="6" />

      <div class="content" v-html="novel"></div>
    </div>
    <div class="read align">
      <!-- 跳转 -->
      
      <router-link
        v-if="!get2[$route.query.id]"
        :to="{ name: 'reader', params: $route.query }"
        ><div class="getInto">enterReading </div></router-link
      >
      <router-link
        v-else
        :to="{
          name: 'reader',
          params: {
            id: $route.query.id,
            sort: get2[$route.query.id],
          },
        }"
        ><div class="getInto">Continue</div></router-link
      >

      <router-link
        :to="{
          name: 'reader',
          params: { id: $route.query.id, sort: $route.query.sort - 0 + 1 },
        }"
      >
        <div style="background-color: #000" class="getInto">N E X T </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { getnovelinfo , getpart } from "@/api/reader";
import { mapGetters } from "vuex";

export default {
  name:"novel",
  data() {
    return {
      more:false,
      paiere: { id: 0, sort: 0  , 2 :3},
      introduction: { data: {} },
      novel: '',

    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    moreadd(){
      this.more =  !this.more
    }
  },
  computed:{
    get1(){
      return  123
    },
    get2(){
      console.log( "历史",this.$route.params.id);
      var  sort =  this.$store.getters.gethistory
      if(sort){
          return  sort
      }else{
        return   0
      }
      return  sort

    },
    // ...mapGetters('gethistory')
  },
  async created() {
    // 发送两个请求

    console.log(this.$store.getters.gethistory);
    console.log( "?对象",this.$route.query);
    let result = await Promise.all([
    getnovelinfo({
        page:1,
        size:1,
        where:{ id : this.$route.query.id }
    }),
      getpart(this.$route.query),
    ]);
    console.log(result);
    this.introduction = result[0].data.list[0];
    result[1].articleContent = result[1].articleContent.replace(
      /(.*\r)/g,
      (n) => {
        if (n.trim()) {
          return "<p>" + n + "</p>";
        } else {
          return "";
        }
      }
    );
    this.novel = result[1].articleContent;
  },
};
</script>

<style lang="scss" scoped>

.icon {
  font-size: 0.8rem;
}
.flex {
  display: flex;
}
.sp{
  justify-content: space-between; 
  padding:  0 1rem;
  text-align: center;
  p{
    font-size: 0.68rem;
  }
  div p:nth-child(1){
     font-weight: 600;
  }
  div p:nth-child(2){
    font-size: 0.5rem;
     color: #cbd0d2
  }
}
.align {
  display: flex;
  align-items: center;
}
.font2 {
  font-size: 0.5rem;
  color: black;
}
// 顶部
.topbox {
  background-color: #f7f7f6;
  height: 1.5rem;
  padding: 0 0.3rem;

  span {
    font-size: 0.5rem;
    margin-left: 0.3rem;
  }
}

//  封面和简介
.fmbox {
  padding: 0.6rem 0;
}

.logo {
  margin: 0 0.6rem;
}

.icon-zuojiantou {
  font-size: 0.7rem;
}
.brief {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  span {
    display: block;
  }

  .icon-mianfei1 {
    color: #ff1111;
  }

  .complete {
    padding: 0.05rem;
    height: 0.4rem;
    margin: 0 0.2rem;
    border-radius: 0.08rem;
    color: #f7f7f6;
    background-color: #de6800;
    font-size: 0.1rem;
  }
}
.flexcenter{
  display: flex;
  align-items: center;
  // transform: scale(1.5);
  // font-size: 1rem;
  color: #b550ff;
  position: relative;
  // margin-left: 1rem;
}
.flexcenter span{
    // position: absolute;
    // top: 0;left: 0;
    font-size: 0.7rem;
}
.brief div:nth-child(1) {
  font-size: 0.7rem;
  font-weight: 600;
}

.introduce {
  text-indent: 1rem;
  line-height: 1rem;
  padding: 0 0.5rem;
  max-height: 4rem;
  overflow: hidden;
  transition: 1s;
}
.moreadd{
  max-height: 8rem;
}

.reader {
  // background-color: #f3f3f0;
  padding: 1rem 0.5rem;
  // min-height: 5rem;
  font-size: 0.6rem;
}

::v-deep .content p:nth-child(1) {
  font-weight: 700;
}

// 底部按钮
.read {
  width: 100vw;
  position: fixed;
  bottom: 0;
  height: 2rem;
  font-size: 0.6rem;
  justify-content: space-evenly;
  .getInto {
    width: 4rem;
    font-family: 幼圆;
    // font-weight: 900;
    background-color: #ebb1b1;
    background-color: #000;
    padding: 0.4rem;
    text-align: center;
    border-radius: 0.7rem;
    color: #fff;
  }
}
.read div:nth-child(1) {
  background-color: #e5353e;
  color: #fff;
}
</style>